// 要用路由，先引入vue-router
import VueRouter from 'vue-router'

// 引入你要用的组件
import School from '../pages/School.vue'
import Student from '../pages/Student.vue'
import Son1 from '../pages/Son1.vue'
import Son2 from '../pages/Son2.vue'
import Food from '../pages/Food.vue'


const router = new VueRouter({
    // 改变路由器的模式，默认是hash模式，还有history模式，hash模式路径上有#
    // 区别1.hash模式不好看但是兼容性好 2.你项目给别人之前需要打包，不然不认识这些文件，.vue之类的，然后文件要
    // 部署到服务器上你才能查看,重点来了,你到处进路径后刷新会404,因为那些路径被服务器当成资源请求了,但是
    // 服务器上面根本没有这些路径,但是hash的路径不会传给服务器所以就不会出现这些情况,但也有解决方法,需要后端匹配资源解决
    mode:'history',
    routes:[
        {
            // 这里是默认路径重定向到/school
            path: '/',
            component: School,
            redirect:'/school',
          
        },
        
        {
            path:'/school',
            component:School,
            // 写子路由就在父路由下面写
            children:[
                // 子路由开头别加斜杠，默认加一个的
               {
                path:'son1',
                component:Son1
               },
               {
                path:'son2',
                component:Son2,
                children:[
                    {
                        path:'food',
                        // 这种是params传递，下面food是你取的参数名字，但是这样写了普通路径用不了了
                        //path:'food/:food',
                        component:Food
                       }
                ]
               }
            ],
              // 设置meta信息
              meta:{xx:'渣渣灰'}
        },
        {
            name:'stu',
            path:'/student',
            component:Student,
            // 在路由中的props写法第一种，值为对象，该对象的所有key-value都会以props的形式传递给该组件，这种因为太固定用的比较少
            // props:{
            //     a:'1',
            //     b:'老衲'
            // }
            // props的第二种写法，为布尔值，如果为真，会把该路由组件收到的所有params参数以props的形式传递过去
            // props:true
            // 第三种写法，传递的props为函数，会给你一个参数，就是你的$route,你可以随意读取里面的值了,还可以读取params这些
            // props($route){
            //     return {id:$route.query.id}
            // }
        },

    ]
})
// 全局前置路由守卫
router.beforeEach((to,from,next)=>{
    console.log('路由守卫被触发了')
    // to是你要去的路由，from是你之前的路由，next是可以通过的函数，你不用这个函数跳转不了组件,你可以做个判断，和条件才通过
    next()
})
// 还有个后置路由守卫，在路由切换之后使用，afterEach，后置路由守卫没有next，因为你已经过了啊
// 还有独享路由守卫（没有后置），组件路由守卫什么的要用再去搜吧，记不住了
export default router